import React from "react"
import { useStaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"

/*
 * This component is built using `gatsby-image` to automatically serve optimized
 * images with lazy loading and reduced file sizes. The image is loaded using a
 * `useStaticQuery`, which allows us to load the image from directly within this
 * component, rather than having to pass the image data down from pages.
 *
 * For more information, see the docs:
 * - `gatsby-image`: https://gatsby.dev/gatsby-image
 * - `useStaticQuery`: https://www.gatsbyjs.org/docs/use-static-query/
 */

const Image = (props) => {
  const { name = '', ...rest} = props
  const data = useStaticQuery(graphql`
    query AuthorAvatars {
      placeholderImage: allFile(filter: {absolutePath: {regex: "/jpeg|jpg|png|gif/"}}) {
        edges {
          node {
            extension
            relativePath
            childImageSharp {
              fluid(maxWidth: 1000) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `)

  if (name) {
    const reg = new RegExp(name)
    const file = data.placeholderImage.edges.find(image => reg.test(image.node.relativePath))
    return <Img {...rest} fluid={file.node.childImageSharp.fluid} />
  }
  return null
}

export default Image
